<template>
  <a-modal :bodyStyle="{ padding: '0', 'max-height': '60vh', 'overflow-y': 'auto' }" :title="title" :width="600" :maskClosable="false" :visible="visible" @cancel="visible = false" :button_loading="button_loading">
    <a slot="footer">
      <a-button @click="visible = false">取消</a-button>
      <a-button type="primary" @click="handleSubmit">确定</a-button>
    </a>

    <a-card>
      <a-row :gutter="24">
        <a-col :md="12" :sm="24">
          <a-card hoverable style="height:600px;overflow-y:auto">
            <a-tree :showLine="true" @expand="onExpand" :expandedKeys="expandedKeys" :autoExpandParent="autoExpandParent" v-model="checkedKeys" @select="onSelect" :selectedKeys="selectedKeys" :treeData="treeData" :replaceFields="replaceFields" />
          </a-card>
        </a-col>
        <a-col :md="12" :sm="24">
          <div v-for="(item, idx) in userList" :key="idx" @click="onChange(item)">
            <div :class="item.id == radioSelect ? 'select_div select_border':'select_div'">
              <span style="margin-right: 30px">
                {{ item.name }}
              </span>
              <span v-if="item.id == radioSelect" style="color: blue">
                <a-icon type="check" />
              </span>
            </div>

          </div>
        </a-col>
      </a-row>
    </a-card>

  </a-modal>
</template>

<script>
import { getDepartmentList } from '@/api/department'
import { deleteChildrenIfNull } from '@/utils/util'

import {
  getSupervisionObjectList,
} from "@/api/allApi";

export default {
  props: {
    selectKeyObj: {
      type: Object,
      default: {}
    },
  },
  data () {
    return {
      title: '选择人员',
      visible: false,
      button_loading: false,
      ParentName: null,
      treeData: [],
      autoExpandParent: true,
      checkedKeys: [],
      selectedKeys: [],
      expandedKeys: [],
      replaceFields: {
        key: 'id'
      },
      radioSelect: '',
      userList: [],
      selectObj: {}
    }
  },
  watch: {
    // 'radioSelect' (val) {
    //   this.radioSelect = val
    // },
  },
  created () {


    getDepartmentList().then(res => {
      this.treeData = res.children
    })

  },
  methods: {

    view () {
      this.radioSelect = this.selectKeyObj.id
      this.visible = true
    },


    onSelect (selectedKeys, e) {
      this.ParentName = e.selectedNodes.length > 0 ? e.selectedNodes[0].data.props.name : this.ParentName

      this.selectedKeys = selectedKeys
      this.ParentId = selectedKeys[0]
      this.initData(selectedKeys)

    },

    async initData (key) {
      let params = {
        index: 1,
        pageSize: 999,
        departmentID: key
      }
      const { data } = await getSupervisionObjectList(params)
      this.userList = []

      this.userList = data.map(el => {
        return {
          name: el.name,
          id: el.id,
          personType: el.personType
        }
      })

    },


    onChange (val) {
      this.selectObj = val
      this.radioSelect = val.id
    },


    onExpand (expandedKeys) {
      console.log('onExpand', expandedKeys)
      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
      // or, you can remove all expanded children keys.
      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    },

    handleSubmit () {
      if (!this.selectObj.id) {
        this.$message.error('还未选择')
        return
      }
      this.$emit("getList", this.selectObj);
      this.visible = false
    },


  }
}

</script>


<style lang="less">
.select_div {
  display: inline-block;
  padding: 7px 10px;
  border-radius: 5px;
  border: 1px solid #dddddd;
  margin-bottom: 15px;
  // line-height: 35px;cursor: pointer;
  &.select_border {
    border: 1px solid blue;
  }
}
</style>